<template>
    <div style="height: 100%;">
        <el-empty :description="description" :image-size="size" :image="nodata" style="height: 100%;" v-if="showData">
        </el-empty>

        <el-empty :description="description" :image-size="size" :image="nochart" style="height: 100%;" v-if="showChart">
        </el-empty>

        <el-empty description="暂无目录" :image-size="size" :image="noMenu" style="height: 100%;" v-if="showMenu">
        </el-empty>

        <div class="empty-state" v-if="showMenuBtn">
            <el-empty :description="descriptionMenu" :image-size="size" :image="noMenu" style="height: 100%;" >
            </el-empty>
            <el-button type="primary" icon="el-icon-plus"  @click="handleAddMenu" size="small" style="margin-top: 20px;">新增目录</el-button>
        </div>
    </div>
</template>
<script>
export default({
    props:{
        showData:{
            type:Boolean,
            default:false
        },
        showChart:{
            type:Boolean,
            default:false
        },
        showMenu:{
            type:Boolean,
            default:false
        },
        showMenuBtn:{
            type:Boolean,
            default:false
        },
        size:{
            type:Number,
            default:140
        },
        description:{
            type:String,
            default:'暂无数据'
        },
        descriptionMenu:{
            type:String,
            default:'点击下方按钮创建首个目录'
        }
    },
    data() {
        return{
            nodata:require('@/assets/image/0502.png'),
            nochart:require('@/assets/image/0497.png'),
            noMenu:require('@/assets/image/0496.png'),
        }
    },
    methods:{
        handleAddMenu(){
            this.$emit('handleAddMenu')
        }
    }
})
</script>
<style scoped>
::v-deep .el-empty{
    padding:0px;
}
::v-deep .el-empty__description p{
    font-size: 12px;
    
}
::v-deep .el-empty__description{
    margin-top: 0px;
}

.empty-state {
    text-align: center;
    padding: 20px;
}

</style>
